<template>
  <a-collapse-panel>
    <template #header>{{ getHeaderText }}</template>
    <template v-if="['bar', 'line'].includes(chart.chartType)">
      <a-form-item :name="['chart', 'grid', 'left']" label="左边距">
        <a-slider v-model:value="chart.grid.left" :max="100" />
      </a-form-item>
      <a-form-item :name="['chart', 'grid', 'top']" label="顶边距">
        <a-slider v-model:value="chart.grid.top" :max="100" />
      </a-form-item>
      <a-form-item :name="['chart', 'grid', 'right']" label="右边距">
        <a-slider v-model:value="chart.grid.right" :max="100" />
      </a-form-item>
      <a-form-item :name="['chart', 'grid', 'bottom']" label="底边距">
        <a-slider v-model:value="chart.grid.bottom" :max="100" />
      </a-form-item>
    </template>
    <template v-if="['pie', 'radar'].includes(chart.chartType)">
      <a-form-item :name="['chart', 'seriesCenter', 'seriesCenterTop']" label="上下边距">
        <a-slider v-model:value="chart.seriesCenter.seriesCenterTop" :max="100" />
      </a-form-item>
      <a-form-item :name="['chart', 'seriesCenter', 'seriesCenterLeft']" label="左右边距">
        <a-slider v-model:value="chart.seriesCenter.seriesCenterLeft" :max="100" />
      </a-form-item>
    </template>
  </a-collapse-panel>
</template>

<script setup lang="ts">
  import { computed, onMounted } from 'vue';
  const props = defineProps(['chart', 'dataSetList']);

  const seriesCenter = {
    seriesCenterLeft: 50,
    seriesCenterTop: 50,
  };

  const getHeaderText = computed(() => {
    if (['pie', 'radar'].includes(props.chart.chartType)) return '中心坐标设置';
    return '坐标轴边距设置';
  });

  onMounted(() => {
    if (!props.chart.seriesCenter && ['pie', 'radar'].includes(props.chart.chartType)) props.chart.seriesCenter = seriesCenter;
  });
</script>
